<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/home/tjmd.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="推荐门店" :showBack="true"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 130rpx)`}">
			<view class="contTop">
				<view class="contTit">
					推荐门店
				</view>
				<view class="contTime">
					智能推荐 
					<u-icon name="arrow-down-fill" color="#222222" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="contBoxBig">
			<scroll-view scroll-y="true" :style="{height:swiperHeight}">
				<view class="listBox">
					<view class="listLi" v-for="(item,index) in 2" :key="index">
						<view class="listTag">
							优质
						</view>
						<view class="listName">
							广州市海珠区(广东公司老百姓大药房江...
						</view>
						<view class="listAddress">
							<image src="/static/home/didian.png" mode=""></image>
							1.8km
							<view class="listAddressName">
								广东省广州市海珠区江南大道中151号
							</view>
						</view>
						<view class="listNumBox">
							<view class="listNumLi">
								<view class="listNum">
									￥<text>32.000</text>
								</view>
								<view class="listNumText">
									本月销售
								</view>
							</view>
							<view class="listNumLi">
								<view class="listNum">
									￥<text>32.000</text>
								</view>
								<view class="listNumText">
									近6个月销售
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mapMode" @click="toUrl('/pages/index/shopMap')">
			地图模式
		</view>
	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
	
	} from '@dcloudio/uni-app';
	
	const scrollerHeight = ref('');
	const swiperHeight = ref('');
	
	onLoad(() => {
		getBarHeight();
	})
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px'
				// resu 可以获取当前屏幕的高度
				const query = uni.createSelectorQuery();
				query.select('.contBoxBig').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					swiperHeight.value = resu.windowHeight - res[0].top - resu.safeAreaInsets
						.bottom - resu.statusBarHeight - 70 +
						'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				});
			}
		});
	}
	
	const toUrl = (data) =>{
		uni.navigateTo({
			url:data
		})
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
	}
	.bgColor{
		width: 750rpx;
		height: 740rpx;
		position: absolute;
		z-index: -1;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.contBox{
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;
		.contTop{
			padding: 0 24rpx;
			box-sizing: border-box;
			.contTit{
				font-weight: 500;
				font-size: 44.87rpx;
				color: #926B12;
			}
			.contTime{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 210.9rpx;
				height: 56.41rpx;
				border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
				background: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				 color: #222222;
				 font-weight: 400;
				 font-size: 29.49rpx;
				 padding: 0 22rpx;
				 box-sizing: border-box;
			}
		}
	}
	.contBoxBig{
		
		padding: 10rpx 22rpx;
		box-sizing: border-box;
		.listBox{
			padding: 0 22rpx;
			box-sizing: border-box;
			.listLi{
				width: 100%;
				border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
				background: #ffffff;
				padding: 37rpx 26rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				position: relative;
				.listTag{
					position: absolute;
					width: 60rpx;
					height: 40rpx;
					background: url('/static/home/tagYz.png') no-repeat center;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					top: 22rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFBF7;
				}
				.listName{
					font-weight: 500;
					font-size: 32.05rpx;
					color: #1C2027;
				}
				.listAddress{
					display: flex;
					align-items: center;
					font-size: 25.64rpx;
					font-weight: 400;
					color: #1C2027;
					margin-top: 14rpx;
					image{
						width: 40.38rpx;
						height: 40.38rpx;
						margin-right: 12rpx;
					}
					.listAddressName{
						font-size: 25.64rpx;
						font-weight: 400;
						color: #7F8494;
						padding-left: 12rpx;
						box-sizing: border-box;
						margin-left: 12rpx;
						border-left: 1rpx solid #7F8494;
					}
				}
				.listNumBox{
					margin-top: 22rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.listNumLi{
						width: 290rpx;
						border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
						background: #f4f6f9;
						padding: 25rpx 21rpx;
						box-sizing: border-box;
						.listNum{
							font-size: 26.92rpx;
							font-weight: 400;
							color: #FA8418;
							text{
								font-size: 38.46rpx;
								font-weight: 400;
							}
						}
						.listNumText{
							font-size: 23.08rpx;
							font-weight: 400;
							color: #7F8494;
						}
					}
				}
			}
		}
	}
	.mapMode{
		width: 123.08rpx;
		height: 123.08rpx;
		background: linear-gradient(52deg, #2d82f8,#0ab5fc);
		box-shadow: 0 5.77rpx 15.38rpx 0 #3788fa29;
		font-weight: 500;
		font-size: 24.36rpx;
		color: #FFFFFF;
		position: fixed;
		right: 23rpx;
		bottom: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>